import { Text, StyleSheet, View, SafeAreaView, FlatList, TouchableWithoutFeedback, ActivityIndicator } from 'react-native'
import React, { useEffect, useRef, useState } from 'react'
import { connect } from 'react-redux'
import { pTx } from "../../utils/dimensions"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import Avatar from "../../components/avatar"
import IconFont from '@pingtou/rn-vant-icons'
import httpApi from "../../api"
import { showModal } from "../../components/rootSiblings/showModal"
import DeleteContact from "../../components/rootSiblings/deleteContact"

const GroupAdmins = (props) => {
    const [group] = useState(props.route.params)
    const realm = useRealm();
    const userInfo = useQuery(schemaName.UserInfo, userInfo => {
        return userInfo.filtered('Current = true');
    })[0];
    const groupInfo = useQuery(schemaName.GroupInfo, Info => {
        return Info.filtered(`Id == ${group.G} and UserId == ${userInfo.Id}`);
    })[0];
    const groupMembers = useQuery(schemaName.GroupMembers, groupMsg => {
        return groupMsg.filtered(`G == ${group.G} and UserId == ${userInfo.Id}`)
    })
    const groupAdmins = useQuery(schemaName.GroupAdmins, admins => {
        return admins.filtered(`G == ${group.G} and UserId == ${userInfo.Id}`)
    })
    const sendGroupRemoveAdmin = async (item) => {
        const res = await httpApi.sendGroupRemoveAdmin({ groupId: group.G, id: item.Id })
        if (res.code == 20) {
            realm.write(() => {
                realm.delete(item);
            })
        } else {
        }

    }
    return (
        <View style={styles.page}>
            <Text style={styles.stylesText} >
                管理员可协助群主管理群聊，拥有发布群公告、移除群成员能力。
            </Text>
            <Text style={styles.stylesText} >
                只有群主具备设置管理员、解散群聊的能力。
            </Text>
            <Text style={styles.stylesText} >
                最多可设置3个管理员
            </Text>
            <View style={styles.row} >
                {groupAdmins.map((item, index) => {
                    return (
                        <View style={styles.li} key={index}>
                            <View style={[styles.flexDirectionRow]}>
                                <Avatar style={styles.avatar} source={{ uri: item.ProfilePhoto }} />
                                <View style={styles.cell}>
                                    <Text style={styles.name}>{item.NickName}</Text>
                                </View>
                            </View>
                            {userInfo.Id == groupInfo?.OwnerId &&
                                <View>
                                    {item.loading ? <ActivityIndicator color="#ffffff" /> : <Text style={styles.stylesButtonRight} onPress={() => showModal(<DeleteContact operation={
                                        [
                                            { text: '移除群聊', onPress: () => sendGroupRemoveAdmin(item) },
                                        ]
                                    } />)}>移除</Text>}
                                </View>
                            }
                        </View>
                    )
                })}

            </View>
            {userInfo.Id == groupInfo?.OwnerId &&
                <TouchableWithoutFeedback onPress={() => props.navigation.navigate('groupAddAdmin', group)}>
                    <View style={styles.stylesButton} >
                        <IconFont name="plus" size={pTx(20)} />
                        <Text style={styles.stylesButtonText}>添加成员</Text>
                    </View>
                </TouchableWithoutFeedback>
            }

        </View>
    )
}

export default GroupAdmins

const styles = StyleSheet.create({
    page: {
        paddingHorizontal: pTx(30),
        paddingVertical: pTx(30),
    },
    stylesText: {
        fontSize: pTx(16),
        paddingVertical: pTx(6),
        color: "#333",
    },
    stylesButton: {
        height: pTx(50),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        marginTop: pTx(20),
        borderTopWidth: 1,
        borderBottomWidth: 1,
        textAlign: "center",
        borderColor: "rgba(0,0,0,0.1)",
    },
    stylesButtonText: {
        fontSize: pTx(16),
        color: "#333",
    },
    flexDirectionRow: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    row: {
        paddingTop: pTx(16),
    },
    li: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        paddingVertical: pTx(10),
        paddingHorizontal: pTx(15),
        borderTopColor: "rgba(175,181,189,0.15)",
        borderTopWidth: 1
    },
    applyMsg: {
        minWidth: pTx(22),
        paddingHorizontal: pTx(7),
        paddingVertical: pTx(2),
        borderRadius: pTx(38),
        textAlign: "center",
        color: "#fff",
        fontWeight: "500",
        fontSize: pTx(12),
        backgroundColor: "#ee0a24"
    },
    avatar: {
        width: pTx(38),
        height: pTx(38),
        borderRadius: pTx(6),
    },
    cell: {
        marginLeft: pTx(12),
    },
    name: {
        fontSize: pTx(16),
        color: "#0A0C14"
    },
    stylesButtonRight: {
        padding: pTx(8),
        color: "#ee0a24",
        opacity: 0.5,
    }
})